<template>
    <div>
        <div class="demo-upload-list" v-for="item in uploadList" style="margin-top:8px;">
            <template v-if="item.status === 1">
                <img :src="item.url" v-if="item.url && item.url.substr(-3) !== 'mp4'">
                <img src="../../../src/assets/images/video.svg" v-else>
                <div class="demo-upload-list-cover">
                    <span class="el-icon-delete" style="color: white" @click="handleRemove(item)"></span>
                </div>
            </template>
            <template v-else>
                <el-progress :text-inside="true" :stroke-width="18" :percentage="item.percentage"
                             style="line-height: 60px;height: 100%;"
                             status="success"></el-progress>
            </template>
        </div>
        <div v-show="uploadList.length < length" class="uploadImgDiv">
            <input type="file" :id="selfUploadId" class="selfUpload">
            <span class="camera el-icon-picture-outline" style="font-size: 20px"></span>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        name: "uploadImg",
        props: {
            uploadList: {
                type: Array,
                default: []
            },
            length: {
                type: Number,
                default: 1
            },
            getTokenUrl: {
                type: String,
                default: "http://111.230.194.39:8081/php/controller.php?action=getToken"
            },
            uploadPath: {
                type: String,
                default: ""
            },
            uploadUrl: {
                type: String,
                default: "http://up-as0.qiniup.com/"
            },
        },
        data() {
            return {
                delImages: [],
                imgName: "",
                uploading: false,
                selfUploadId: ""
            }
        },
        methods: {
            handleRemove(file) {
                let upload = this.uploadList;
                upload.splice(upload.indexOf(file), 1);
            },
            handleView(name) {
                this.imgName = name;
                this.visible = true;
            },
            qiniuUpload() {
                if(!document.getElementById(this.selfUploadId).value) return
                let path = this.uploadPath
                    , time = 'mmdd'
                    , file = document.getElementById(this.selfUploadId).files[0]
                    , randNumber = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
                    , now = new Date()
                    , filename = path + new Date().Format(time) + '/' + Date.parse(now) + randNumber + "." + file.name.replace(/(.*\.)/, '')
                    , getTokenUrl = this.getTokenUrl
                    , uploadUrl = this.uploadUrl


                axios.post(getTokenUrl,{"key": filename},{
                        transformRequest: [function (data) {
                            let ret = ''
                            for (let it in data) {
                                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                            }
                            return ret
                        }],
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }})
                    .then(res=>{
                    document.getElementById(this.selfUploadId).value = ''
                    if(res && res.token){
                        let formData = new FormData();
                        formData.append('key', filename);
                        formData.append('token', res.token);
                        formData.append('file', file);

                        this.uploading = true
                        let length = this.uploadList.length
                        this.uploadList.push({
                            percentage:0,
                            url:'',
                            status:'start',
                        })
                        axios.post(uploadUrl,formData,{
                            onUploadProgress:  (progressEvent) =>{
                                this.uploadList[length].percentage = progressEvent.loaded/progressEvent.total * 100
                            },
                        }).then(res=>{
                            if(res && res.state === 'SUCCESS'){
                                this.uploadList[length].status = 1
                                this.uploadList[length].url = res.url
                            }
                        }).finally(()=>{
                            this.uploading = false
                        })
                    }
                })
            },
        },
        mounted() {
            document.getElementById(this.selfUploadId).onchange = this.qiniuUpload
        },
        created() {
            this.selfUploadId = "selfUpload" + new Date().valueOf()
            if(!this.uploadPath){
                this.uploadPath = 'cod/source/'+ (this.getStore('IP')?this.getStore('IP').replace(/(.*\/\/)/,''):location.hostname.replace(/(.*\/\/)/,'')+'/')
            }
        }
    }
</script>

<style scoped>
    .uploadImgDiv {
        display: inline-block;
        width: 58px;
        height: 58px;
        margin-top: 8px;
        background-color: rgb(255, 255, 255);
        border: 1px dashed #dddee1;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: border-color .2s ease;
    }

    .camera {
        line-height: 53px;
    }

     .uploadImgDiv:hover {
        border: 1px dashed #2d8cf0;
        color: #2d8cf0;
    }

    .selfUpload {
        width: 60px;
        height: 60px;
        position: absolute;
        left: 0;
        opacity: 0;
        cursor: pointer;
        background-color: red;
    }

    .demo-upload-list {
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 0;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        margin-right: 4px;
    }

    .demo-upload-list img {
        width: 100%;
        height: 100%;
    }


    .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
    }

    .demo-upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }

    .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        line-height: 60px;
        background: rgba(0, 0, 0, .6);
    }

    .middle {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
</style>
